<template>
  <div class="top-fixed-div">
    <el-menu :default-active="activeIndex" class="horizontal-menu">
      <img src="/src/assets/picture/title-logo.png" style="width: 150px;" />
      <el-menu-item v-for="(item, index) in navItems" 
      :key="index" 
      :index="`nav-${index}`" 
      @click="handleMenuItemClick(item)"
      class="menu-item"
      >     
        <span style="color: white;">{{ item.chinese }}</span>
        <span style="color: white; margin-bottom: 50px;">{{ item.english }}</span>

      </el-menu-item> 
    </el-menu>
    <div>
      <router-view></router-view>
    </div>
  </div>
  
</template>

<style>
.horizontal-menu {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 70px;
  width: 100%;
  background-color: #8594BF;
  border-bottom: 1px solid #8594BF;
  box-shadow: 0 1px 3px rgba(26, 26, 26, 0.1);
}
.el-menu-item span {
  display: block; /* 或者使用 white-space: pre-wrap; 或 white-space: pre-line; */
  margin-bottom: 10px;
  height: 10px;
}
.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center the text horizontally */
  justify-content: center;
}
.top-fixed-div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* 确保这个div在其他内容之上 */
}
</style>

<script>
export default {
  data() {
    return {
      activeIndex: 'nav-0',
      navItems: [
        { chinese: '首页', english: 'HOMEPAGE', route : '/homepage'},
        { chinese: '主打产品', english: 'SERIES' , route : '/series'},
        { chinese: '产品定制', english: 'ORDER' , route : '/order'},
        { chinese: '关于我们', english: 'INTRODUCTION' , route : '/introduction'},
        // { chinese: '招聘', english: 'RECRUITMENT' , route : '/recruitment'},
        { chinese: '联系我们', english: 'CONTACT' , route : '/contact'}
      ]
    };
  },
  methods: {
    handleMenuItemClick(item) {
      // 根据item的english属性来确定路由跳转的目标路径
      let routePath = '/main' + item.route;
      this.$router.push(routePath);
    }
  }
};
</script>